<template>
  <view class="content">
    <!-- banner轮播图 -->
    <view class="banner-container">
      <swiper 
        class="banner-swiper" 
        circular 
        autoplay 
        interval="3500" 
        duration="500" 
        indicator-dots 
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index" @click="handleBannerClick(item)">
          <view class="banner-item">
            <image class="banner-img" :src="item.bannerImg" mode="aspectFill"></image>
            <view class="banner-title">{{item.bannerTitle}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [], // banner列表
    }
  },
  onLoad() {
    this.loadBannerData()
  },
  methods: {
    // 加载banner数据
    loadBannerData() {
      this.request('loadBaneer', 'GET').then(res => {
        if (res && res.data) {
          this.bannerList = res.data.map(item => ({
            ...item,
            bannerImg: this.myimgurl() + item.bannerImg // 拼接完整图片路径
          }))
        }
      }).catch(err => {
        console.error('加载banner失败：', err)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      })
    },
    // 处理banner点击
    handleBannerClick(item) {
      if (item.bannerUrl) {
        // 可以根据实际需求处理跳转逻辑
        uni.navigateTo({
          url: item.bannerUrl
        })
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.banner-container {
  width: 100%;
  height: 400rpx;
  background: #fff;
  padding: 20rpx;
  box-sizing: border-box;
}

.banner-swiper {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.banner-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.banner-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  color: #fff;
  font-size: 28rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
